<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <h3>图书管理</h3>
        <el-divider></el-divider>
        <el-input v-model="input" placeholder="请输入内容" width="180"></el-input>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
        </el-table>
    </div>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    // 输入框
                    input: '',
                    //表格
                    tableData: []
                }
            },
            mounted(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:81/student"
                }).then(function (resp){
                    _this.tableData = resp.data;
                }).catch(error=>{
                    alert(error)
                })
            },
         })
    </script>
</body>
</html>